<template>
  <div class="login-container">
    <header class="header">
      <main class="container flex flex-between">
        <div class="header_left flex fl_row_center">
          <img src="@/assets/img/sampleManagement/LOGO.png" alt />
          <em class="title">航天测控智能模型开发与样本制备系统</em>
        </div>
      </main>
    </header>
    <main class="main-container fl_row_center">
      <div>
        <div class="loginTitle">
          <img src="@/assets/img/login/title.png" alt />
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          auto-complete="on"
          label-position="left"
        >
          <el-form-item prop="username">
            <div class="form-item__wrap">
              <span class="svg-container"></span>
              <el-input
                height="60px"
                ref="username"
                class="commonInput"
                v-model="loginForm.username"
                placeholder="请输入用户名"
                name="username"
                type="text"
                tabindex="1"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="form-item__wrap">
              <span class="svg-container passwordIcon"></span>
              <el-input
                :key="passwordType"
                ref="password"
                class="commonInput"
                v-model="loginForm.password"
                :type="passwordType"
                placeholder="请输入用户密码"
                name="password"
                tabindex="2"
                show-password
              ></el-input>
            </div>
          </el-form-item>
           <main class="formCheck">
              <el-checkbox v-model="loginForm.checked">记住密码</el-checkbox>
            </main>
          <footer class="fl_row_center">
            <el-button :loading="loading" @click="handleLogin" class="login">登录</el-button>
          </footer>
        </el-form>
      </div>
    </main>
  </div>
</template>
<script src='./index.js'></script>
<style lang='scss' src='./index.scss' scoped></style>
